<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>显示所有的电影</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>首页</title>

		<!-- Bootstrap -->
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="bootstrap/js/bootstrap.min.js"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

		<style type="text/css">
			.infotab tr th {
				text-align: center;
			}
		</style>
	</head>

	<body>

		<div class="container text-center" style="margin-top:30px ">
			<div class="row text-center">
				<div class="col-lg-3">
					<a href="addfilm.html">添加电影</a>
				</div>
				<div class="col-lg-3">
					<a href="addtype.html">添加电影类型</a>
				</div>
				<div class="col-lg-3">
					<a href="adduser.html">用户注册</a>
				</div>
				<div class="col-lg-3">
					<a href="userlogin.html">用户登录</a>
				</div>
				<form id="selectform">
					<p>
						<input type="text" class="form-control" name="filmName" id="filmName" placeholder="电影名称">
					</p>
					<p>
						<select class="form-control" id="typeId" name="typeId">
							<option value="">选择类型</option>
						</select>

					</p>

					<p>
						<input type="text" class="form-control" name="actor" id="actor" placeholder="主演">
					</p>
					<p>
						<input type="text" class="form-control" name="director" id="director" placeholder="导演">
					</p>
					<p>
						<input type="text" class="form-control" name="ticketPrice" id="ticketPrice" placeholder="价格">
					</p>
					<button class="btn btn-default" onclick="select()" type="button">查询</button>
					<input class="btn btn-default" type="reset" value="清空">
				</form>

				<table class="table-striped col-lg-12 infotab">
					<tr>
						<th>电影ID</th>
						<th>电影名称</th>
						<th>电影类型</th>
						<th>主演</th>
						<th>导演</th>
						<th>价格</th>
						<th>删除</th>
						<th>编辑</th>
					</tr>
					<tbody id="info"></tbody>
				</table>

			</div>
		</div>

		<script type="text/javascript">
			/* 根据类型的id查类型 */
			$.ajax({
				type: "get",
				dataType: "json",
				url: "filmtypes?token=" + $.cookie("token"),
				success: function(msg2) {

					for(var i = 0; i < msg2.length; i++) {
						$("#typeId").append(
							"<option value='" + msg2[i].typeId + "'>" +
							msg2[i].typeName + "</option>");
					}

					typeName = msg2.typeName;
				},
				error: function(xhr, textStatus, error) {
					if(xhr.status == "401") {
						location.href = "userlogin.html";
					}
				}

			});
		</script>

		<script type="text/javascript">
			/* 将json写入table */
			function show(msg) {
				$("#info").text("");
				for(var i = 0; i < msg.length; i++) {

					$("#info")
						.append(
							"<tr><td>" +
							msg[i].filmId +
							"</td><td>" +
							msg[i].filmName +
							"</td><td></td><td>" +
							msg[i].actor +
							"</td><td>" +
							msg[i].director +
							"</td><td>" +
							msg[i].ticketPrice +
							"</td><td><a href='updatefilm.html?id=" +
							msg[i].filmId +
							"'>编辑</a></td><td><a href='javascript:void(0)' onclick='deleteById(" +
							msg[i].filmId +
							",this)'>删除</a></td></tr>");

					(function() {
						var temp = i;
						$.ajax({
							type: "get",
							dataType: "json",
							url: "filmtype/" + msg[temp].typeId + "?token=" + $.cookie("token"),
							success: function(msg2) {
								$("#info").find("tr").eq(temp).find("td").eq(2)
									.text(msg2.typeName);
							},
							error: function(xhr, textStatus, error) {
								if(xhr.status == "401") {
									location.href = "userlogin.html";
								}
							}

						});
					})();
				}
			}
		</script>

		<script type="text/javascript">
			function select() {
				var post_data = {
					"typeId": $("#typeId").val(),
					"filmName": $("#filmName").val(),
					"actor": $("#actor").val(),
					"director": $("#director").val(),
					"ticketPrice": $("#ticketPrice").val()
				};
				$.ajax({
					cache: false,
					type: "post",
					contentType: "application/json; charset=utf-8",
					url: "filminfos/param?token=" + $.cookie("token"),
					data: JSON.stringify(post_data),
					error: function(xhr, textStatus, error) {
						if(xhr.status == "401") {
							location.href = "userlogin.html";
						}
					},
					success: function(msg) {
						show(msg);
					}
				});
			}
		</script>

		<script type="text/javascript">
			$(function() {
				$.ajax({
					type: "get",
					dataType: "json",
					url: "filminfos?token=" + $.cookie("token"),
					success: function(msg) {
						show(msg);
					},
					error: function(xhr, textStatus, error) {
						if(xhr.status == "401") {
							location.href = "userlogin.html";
						}
					}

				});
			})

			function deleteById(id, alink) {
				if(confirm("确认删除？")) {
					(function() {
						var temp = alink;
						$.ajax({
							url: "filminfo/" + id + "?token=" + $.cookie("token"),
							type: "delete",
							success: function(msg) {
								alert("删除成功");
								$(alink).parent().parent().remove();
							},
							error: function(xhr, textStatus, error) {
								alert(123);
								if(xhr.status == "401") {
									location.href = "userlogin.html";
								} else {
									alter("删除失败");
								}
							}
						});
					})();
				}

			}
		</script>
	</body>

</html>